import { useLocation, useNavigate, useParams } from "react-router-dom";
import { deleteInvoice, getInvoice } from "../data/data_invoices";
export default function InvoiceDetail({}){
  let urlParams = useParams();
  let navigate = useNavigate();
  let location = useLocation();

  let invoice = getInvoice({
    number: parseInt(urlParams.invoiceId)
  })

  return <main>
          <div>
            <h2>Total Due: {invoice.amount}</h2>
            <p>
              {invoice.name}: {invoice.number}
            </p>
            <p>Due Date: {invoice.due}</p>
            <p>
              <button
                onClick={() => {
                  debugger
                  deleteInvoice({
                    number: invoice.number
                  });
                  navigate("/invoices" + location.search);
                }}
              >
                Delete
              </button>
            </p>
          </div>
        </main>
}